<script setup lang="ts">
import { reactive, toRaw } from "vue";
import deviceTree from "./type/deviceTree";

const treeInstance = reactive(new deviceTree());
const state = toRaw(treeInstance).baseData;
</script>

<template>
  <div class="box">
    <h2>这是设备树组件</h2>
    <el-tree-select
      v-model="treeInstance.filterValue"
      :lazy="false"
      :data="treeInstance.baseData.treeData"
      :load="treeInstance.load"
      :props="treeInstance.defaultProps"
      filterable
    />
    <div class="tree">
      <el-tree
        :data="treeInstance.baseData.treeData"
        :props="treeInstance.defaultProps"
        @node-click="treeInstance.handleNodeClick"
        v-loading="treeInstance.loading"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  .tree {
    height: 500px;
    overflow-y: scroll;
  }
}
</style>
